<template>
	<div class="allReports">
		<div class="allReports-title">
			<div class="allReports-title-search">
				<img src="/static/images/agent-lowerLevel-serch.png" alt=""
				     class="allReports-title-search-icon">
				<input type="text" :placeholder="chosedDate" class="allReports-title-search-input" readonly @click="dateSelect=true" v-if="chosingTitle===1 || chosingTitle===2 || chosingTitle ===3 || chosingTitle ===4 || chosingTitle ===7">
				<input type="text" placeholder="暂不支持" class="allReports-title-search-input" readonly v-if="chosingTitle === 5">
				<input type="text" placeholder="代理账户" class="allReports-title-search-input" maxlength="20" v-if="chosingTitle === 6" v-model="teamCommissionVal">
				<div class="allReports-title-search-btn" @click="customSearch()" v-if="chosingTitle===1 || chosingTitle===2 || chosingTitle ===3 || chosingTitle ===4 || chosingTitle ===7">查询</div>
				<div class="allReports-title-search-btn" v-if="chosingTitle === 5" style="background: rgba(0, 71, 157,.5);">查询</div>
                <div class="allReports-title-search-btn" @click="teamCommissionSearch()" v-if="chosingTitle===6">查询</div>
			</div>
			<van-button class="search-btn" round type="info" color="#1B3D8E" @click="clickShowSwitch()" v-if="chosingTitle===1 || chosingTitle===2 || chosingTitle ===3 || chosingTitle ===4 || chosingTitle ===7">{{dateShowMode}}</van-button>
			<van-button class="search-btn" round type="info" color="#1B3D8E" v-if="chosingTitle===5 || chosingTitle === 6" disabled>全部</van-button>
		</div>
		<div class="allReports-content">
			<div class="allReports-content-title-box">
				<div class="allReports-content-title" id="titleScroll">
					<div class="allReports-content-title-list" :class="chosingTitle===1?'title-chosing':''"
					     @click="switchTitle(1)">财务总报表
					</div>
					<div class="allReports-content-title-list" :class="chosingTitle===2?'title-chosing':''"
					     @click="switchTitle(2)">游戏输赢报表
					</div>
					<div class="allReports-content-title-list" :class="chosingTitle===3?'title-chosing':''"
					     @click="switchTitle(3)">存提明细报表
					</div>
					<div class="allReports-content-title-list" :class="chosingTitle===4?'title-chosing':''"
					     @click="switchTitle(4)">红利返水报表
					</div>
					<div class="allReports-content-title-list" :class="chosingTitle===5?'title-chosing':''"
					     @click="switchTitle(5)">佣金报表
					</div>
                    <div class="allReports-content-title-list" :class="chosingTitle===6?'title-chosing':''"
					     @click="switchTitle(6)">团队佣金报表
					</div>
					<div class="allReports-content-title-list" :class="chosingTitle===7?'title-chosing':''"
					     @click="switchTitle(7)">会员首存报表
					</div>
				</div>
			</div>
		</div>
		<div class="gray-line"></div>
		<div class="collapse-content">
			<swiper :options="swiperOption2" ref="mySwiper2">
				<swiper-slide>
					<!--财务总报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle===1">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.countDay }}</div>
							<div class="collapse-content-list-title-left">{{ item.countMounth }}</div>
							<div class="">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
								     class="collapse-content-list-title-right">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
								     class="collapse-content-list-title-right collapse-content-list-title-right2">
							</div>
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list">
									<div class="">
										<div class="line1">新注册会员</div>
										<div class="line2">{{item.regNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">活跃会员</div>
										<div class="line2">{{item.betNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">有效会员</div>
										<div class="line2">{{item.validNum}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list">
									<div class="">
										<div class="line1">投注金额</div>
										<div class="line2">{{item.betMoney}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">有效投注</div>
										<div class="line2">{{item.validMoney}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">输赢金额</div>
										<div class="line2">{{item.netMoney}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
				<swiper-slide>
					<!--游戏输赢报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle===2">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.gameName }}</div>
							<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
							     class="collapse-content-list-title-right">
							<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
							     class="collapse-content-list-title-right collapse-content-list-title-right2">
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">投注人数</div>
										<div class="line2">{{item.betNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">投注金额</div>
										<div class="line2">{{item.betMoney}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">有效投注金额</div>
										<div class="line2">{{item.validMoney}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">有效优惠金额</div>
										<div class="line2">{{item.validBonusMoney}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">输赢金额</div>
										<div class="line2">{{item.netMoney}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
				<swiper-slide>
					<!--存提明细报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle===3">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.countDay }}</div>
							<div class="">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
								     class="collapse-content-list-title-right">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
								     class="collapse-content-list-title-right collapse-content-list-title-right2">
							</div>
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">存款金额</div>
										<div class="line2">{{item.cashInMoney}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">取款总额</div>
										<div class="line2">{{item.cashOutMoney}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">存款人数</div>
										<div class="line2">{{item.cashInNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">取款人数</div>
										<div class="line2">{{item.cashOutNum}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
				<swiper-slide>
					<!--红利返水报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle===4">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.countDay }}</div>
							<div class="">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
								     class="collapse-content-list-title-right">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
								     class="collapse-content-list-title-right collapse-content-list-title-right2">
							</div>
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">红利人数</div>
										<div class="line2">{{item.bonusNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">红利总额</div>
										<div class="line2">{{item.bonusMoney}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">返水人数</div>
										<div class="line2">{{item.rebatesNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">返水总额</div>
										<div class="line2">{{item.rebatesMoney}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
				<swiper-slide>
					<!--佣金报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle===5">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.countMounth }}</div>
							<div class="">
								<div class="right-fonts">{{item.status}}</div>
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
								     class="collapse-content-list-title-right">
								<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
								     class="collapse-content-list-title-right collapse-content-list-title-right2">
							</div>
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">本月佣金</div>
										<div class="line2">{{item.commission}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">有效</div>
										<div class="line2">{{item.oldNum}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">修正</div>
										<div class="line2">{{item.unNum}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">实际人数</div>
										<div class="line2">{{item.num}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">未结算</div>
										<div class="line2">{{item.lastCommission}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">分成</div>
										<div class="line2">{{item.lowerCommission}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">总佣金</div>
										<div class="line2">{{item.oldCommission}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">修正佣金</div>
										<div class="line2">{{item.unCommission}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">实际佣金</div>
										<div class="line2">{{item.totalCommission}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
                <swiper-slide>
					<!--团队佣金报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle==6">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.agentName }}</div>
							<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
							     class="collapse-content-list-title-right">
							<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
							     class="collapse-content-list-title-right collapse-content-list-title-right2">
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">开始日期</div>
										<div class="line2">{{item.beginDateShow}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">结束日期</div>
										<div class="line2">{{item.endDateShow}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">代理账号</div>
										<div class="line2">{{item.agentName}}</div>
									</div>
                                    <div class="gray-line"></div>
									<div class="">
										<div class="line1">有效存款人数</div>
										<div class="line2">{{item.num}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">用户输赢</div>
										<div class="line2">{{item.net}}</div>
									</div>
                                    <div class="gray-line"></div>
									<div class="">
										<div class="line1">净输赢</div>
										<div class="line2">{{item.validNet}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
                    <div class="collapse-content-list" v-if="chosingTitle==6">
                        <div class="collapse-content-list-title" @click="showTeamCommission = !showTeamCommission">
							<div class="collapse-content-list-title-left">汇总</div>
							<img src="/static/images/allReports-arrow.png" v-if="!showTeamCommission" alt=""
							     class="collapse-content-list-title-right">
							<img src="/static/images/allReports-arrow.png" v-if="showTeamCommission" alt=""
							     class="collapse-content-list-title-right collapse-content-list-title-right2">
						</div>
                        <div class="collapse-content-list-table" v-if="showTeamCommission">
                            <div class="">
                                <div class="collapse-content-list-table-list collapse-content-list-table-list2">
                                    <div class="">
                                        <div class="line1">用户输赢</div>
                                        <div class="line2">{{sumMap.net}}</div>
                                    </div>
                                    <div class="gray-line"></div>
                                    <div class="">
                                        <div class="line1">净输赢</div>
                                        <div class="line2">{{sumMap.validNet}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
				<swiper-slide>
					<!--会员首存报表-->
					<div class="collapse-content-list" v-for="(item,index) in statistic" @click="switchTitleShow(index)" v-if="chosingTitle===7">
						<div class="collapse-content-list-title">
							<div class="collapse-content-list-title-left">{{ item.loginName }}</div>
							<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===0" alt=""
							     class="collapse-content-list-title-right">
							<img src="/static/images/allReports-arrow.png" v-if="showDataSwitch[index]===1" alt=""
							     class="collapse-content-list-title-right collapse-content-list-title-right2">
						</div>
						<div class="collapse-content-list-table" v-if="showDataSwitch[index]===1">
							<div class="">
								<div class="collapse-content-list-table-list collapse-content-list-table-list2">
									<div class="">
										<div class="line1">首存</div>
										<div class="line2">{{item.firstMoney}}</div>
									</div>
									<div class="gray-line"></div>
									<div class="">
										<div class="line1">类型</div>
										<div class="line2">{{item.type}}</div>
									</div>
								</div>
								<div class="collapse-content-list-table-list collapse-content-list-table-list3">
									<div class="">
										<div class="line1">首存时间</div>
										<div class="line2">{{item.firstTime}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="collapse-content" v-if="noData">
						<div class="no-data-box">
							<img src="/static/images/agent-reports-noData.png" alt="" class="no-data-img">
							<div class="no-data-fonts">暂无数据</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
			<div class="load-more" v-if="hasMore && statistic.length > 0" @click="loadMore()">
				<span>点击加载更多</span>
				<img src="/static/images/agent-lowerLevel-loadMore.png" alt="" class="load-more-icon">
			</div>
			<div class="load-more" v-if="!hasMore && statistic.length > 0">
				<span>已加载全部</span>
			</div>
		</div>
		<van-calendar v-model="dateSelect" :min-date="new Date(dateRange.getFullYear(),dateRange.getMonth()-1,1)" :max-date="new Date(dateRange.getFullYear(),dateRange.getMonth(),dateRange.getDate())" type="range" @confirm="onConfirmDate" color="#00459E" title="请选择日期范围"/>
		<van-action-sheet id="dateSwitch" class="date-switch" v-model="dateSwitchShow" title="" @click-overlay="cancelDateSwitch">
			<div class="date-switch-title">请选择时间</div>
			<div class="date-switch-content">
				<div class="date-switch-content-list" @click="chosingDate(1)">
					<div class="left">本周</div>
					<div class="right">
						<div class="blue-point" v-if="isChosinDate===1"></div>
					</div>
				</div>
				<div class="date-switch-content-list" @click="chosingDate(2)">
					<div class="left">上周</div>
					<div class="right">
						<div class="blue-point" v-if="isChosinDate===2"></div>
					</div>
				</div>
				<div class="date-switch-content-list" @click="chosingDate(3)">
					<div class="left">本月</div>
					<div class="right">
						<div class="blue-point" v-if="isChosinDate===3"></div>
					</div>
				</div>
				<div class="date-switch-content-list" @click="chosingDate(4)">
					<div class="left">上月</div>
					<div class="right">
						<div class="blue-point" v-if="isChosinDate===4"></div>
					</div>
				</div>
			</div>
			<van-button class="date-switch-sub" color="#00459E" block @click="searchBydate">确定</van-button>
		</van-action-sheet>
        <!-- <van-loading size="24px" color="#00479D" v-if="showLoading" vertical style="margin-top: 1rem">
            <span style="color: #00479D">加载中...</span>
        </van-loading> -->
        <!--loading-new-->
        <div class="loading-new" v-if="showLoading">
            <img src="/static/images/allLoading.gif" alt="" />
        </div>
	</div>
</template>

<script>
import $ from 'jquery';
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import dayjs from 'dayjs'
let vm = null;
export default {
	name: 'allReports',
	components: {
		$,
		swiper,
		swiperSlide
	},
	data() {
		return {
			chosingTitle: 1,
			dataShow: -1,
			showDataSwitch: [],
			dateSwitchShow:false,
			isChosinDate:1,
			queryChoingDateIndex:1,
			dateShowMode:'本周',
			dateType:'week',
			dateSelect:false,
			dateValue:'',
			// minDate: new Date(2016, 0, 1),
			// maxDate: new Date(2020, 10, 11),
			chosedDate:'请选择日期范围',
			statistic:[],
			beginTime:'',
			endTime:'',
			pageNumber1:1,
			pageNumber2:1,
			pageNumber3:1,
			pageNumber4:1,
			pageNumber5:1,
			pageNumber6:1,
			hasMore:true,
			dateRange:new Date(),
			showLoading:false,
			noData:false,
			swiperOption2: {
				loop: false,
				initialSlide: 0,
				observer: true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents: true,//修改swiper的父元素时，自动初始化swiper
				onSlideChangeEnd: function (swiper) {
					vm.switchTitle(swiper.realIndex + 1)
				},
				
			},
            showTeamCommission:true,
            sumMap:{},
            teamCommissionVal:'',
		}
	},
	mounted() {
		this.loadTop()
	},
	created() {
		vm = this;
	},
	methods: {
		formatDate(date) {
			return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
		},
		onConfirmDate(date) {
			const [start, end] = date;
			this.chosedDate = `${this.formatDate(start)} - ${this.formatDate(end)}`;
			this.beginTime = `${this.formatDate(start)}`
			this.endTime = `${this.formatDate(end)}`
			this.dateSelect = false
            this.dateShowMode = '自定义'
		},
		loadTop(){
			this.getStaticData()
		},
		//财务总报表
		getStaticData(){
			this.showLoading = true
			let params = {
				beginTime:this.beginTime,
				endTime:this.endTime,
				pageNumber:this.pageNumber1,
				pageSize:30,
				type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.statistic,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.pageList.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.pageList.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data.pageList)
						if(this.statistic.length === 0){
							this.noData = true
						}
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.inf,3);
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2);
				}
			})
		},
		//游戏输赢报表
		getGamesReports(){
			this.showLoading = true
				let params = {
				beginTime:this.beginTime,
				endTime:this.endTime,
				pageNumber:this.pageNumber1,
				pageSize:30,
				type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.gamesReports,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.pageList.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.pageList.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data.pageList)
						if(this.statistic.length === 0){
							this.noData = true
						}
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.info,3);
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2);
				}
			})
		},
		//存提明细报表
		getTransferReports(){
			this.showLoading = true
				let params = {
				beginTime:this.beginTime,
				endTime:this.endTime,
				pageNumber:this.pageNumber1,
				pageSize:30,
				type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.transferReports,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.pageList.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.pageList.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data.pageList)
						if(this.statistic.length === 0){
							this.noData = true
						}
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.info,3);
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2);
				}
			})
		},
		//红利返水报表
		getBonusReports(){
			this.showLoading = true
				let params = {
				beginTime:this.beginTime,
				endTime:this.endTime,
				pageNumber:this.pageNumber1,
				pageSize:30,
				type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.bonusReports,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data)
						if(this.statistic.length === 0){
							this.noData = true
						}
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.info,3)
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2)
				}
			})
		},
		//佣金报表
		getCommissionReports(){
			this.showLoading = true
				let params = {
				pageNumber:this.pageNumber1,
				pageSize:30,
				type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.commissionReports,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data)
						this.statistic.forEach((item)=>{
							if(item.status === true){
								item.status = '已结算'
							}else if(item.status === false){
								item.status = '未结算'
							}
						})
						if(this.statistic.length === 0){
							this.noData = true
						}
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.info,3)
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2)
				}
			})
		},
		//团队佣金报表
		getTeamCommission(){
			this.showLoading = true
				let params = {
				// beginTime:this.beginTime,
				// endTime:this.endTime,
                loginName:this.teamCommissionVal,
				pageNumber:this.pageNumber1,
				pageSize:30,
				// type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.teamCommission,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.dataList.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.dataList.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data.dataList)
						if(this.statistic.length === 0){
							this.noData = true
						}
                        this.statistic.forEach((t,i)=>{
                            // console.log(dayjs(t.beginDate).format('YYYY-MM-DD'))
                            t.beginDateShow = dayjs(t.beginDate).format('YYYY-MM-DD')
                            t.endDateShow = dayjs(t.endDate).format('YYYY-MM-DD')
                        })
                        this.sumMap = data.data.sumMap
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.info,3)
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2)
				}
			})
		},
		//会员首存报表
		getFirstReports(){
			this.showLoading = true
				let params = {
				beginTime:this.beginTime,
				endTime:this.endTime,
				pageNumber:this.pageNumber1,
				pageSize:30,
				type:this.dateType,
			}
			this.ServerAPI.postAPI(this.API.firstReports,params,(success,data)=>{
				if (success){
					if(data.code === '0000'){
						this.showLoading = false
						if(data.data.length === 30){
							this.hasMore = true
							this.noData = false
						}else if(data.data.length < 30){
							this.hasMore = false
							this.noData = false
						}
						this.statistic = this.statistic.concat(data.data)
						if(this.statistic.length === 0){
							this.noData = true
						}
						this.handleDataSwitch()
					}else{
						this.showLoading = false
                        this.$toastTop(data.info,3)
					}
				}else{
					this.showLoading = false
                    this.$toastTop('网络慢，请稍后再试',2)
				}
			})
		},
		handleDataSwitch() {
			this.statistic.forEach((item, index) => {
				this.showDataSwitch[index] = 1
			})
		},
		// 导航栏报表切换
		switchTitle(value) {
			if(this.chosingTitle !== value){
				this.noData = false
				this.statistic = []
				this.pageNumber1 = 1
				this.chosingTitle = value
				this.onChange(value)
				if(value === 1){
					this.getStaticData()
				}else if(value === 2){
					this.getGamesReports()
				}else if(value === 3){
					this.getTransferReports()
				}else if(value === 4){
					this.getBonusReports()
				}else if(value === 5){
					this.getCommissionReports()
				}else if(value === 6){
					this.getTeamCommission()
				}else if(value === 7){
					this.getFirstReports()
				}
			}
			this.$refs.mySwiper2.swiper.slideTo(value - 1, 500, true)
		},
		
		onChange(index) {
			var levelListBox = document.getElementById('titleScroll');
			if (index == 3) {
				levelListBox.style.marginLeft = '-1.5rem'
			} else if (index == 4) {
				levelListBox.style.marginLeft = '-3.5rem'
			} else if (index == 5) {
				levelListBox.style.marginLeft = '-5.5rem'
			} else if (index == 6) {
				levelListBox.style.marginLeft = '-7.5rem'
			} else if (index == 7) {
				levelListBox.style.marginLeft = '-9.5rem'
			} else {
				levelListBox.style.marginLeft = '0rem'
			}
		},
		clickShowSwitch(){
			this.dateSwitchShow = true
		},
		switchTitleShow(value) {
			this.showDataSwitch[value] = this.showDataSwitch[value] === 1 ? 0 : 1
			this.$forceUpdate()
		},
		chosingDate(value){
			this.isChosinDate = value
		},
		cancelDateSwitch(){
			this.isChosinDate = this.queryChoingDateIndex
		},
		// 快捷选择时间范围查询
		searchBydate(){
			this.statistic = []
			this.pageNumber1 = 1
			this.queryChoingDateIndex = this.isChosinDate
			if(this.queryChoingDateIndex===1){
				this.dateType = 'week'
				this.dateShowMode = '本周'
			}else if(this.queryChoingDateIndex===2){
				this.dateType = 'lastweek'
				this.dateShowMode = '上周'
			}else if(this.queryChoingDateIndex===3){
				this.dateType = 'month'
				this.dateShowMode = '本月'
			}else if(this.queryChoingDateIndex===4){
				this.dateType = 'lastmonth'
				this.dateShowMode = '上月'
			}
			this.beginTime = ''
			this.endTime = ''
			this.chosedDate = '请选择日期范围'
			this.dateSwitchShow = false
			this.reloadData()
		},
		// 统一调用重新加载数据方法
		reloadData(){
			if(this.chosingTitle === 1){
				this.getStaticData()
			}else if(this.chosingTitle === 2){
				this.getGamesReports()
			}else if(this.chosingTitle === 3){
				this.getTransferReports()
			}else if(this.chosingTitle === 4){
				this.getBonusReports()
			}else if(this.chosingTitle === 5){
				this.getCommissionReports()
			}else if(this.chosingTitle === 6){
				this.getTeamCommission()
			}else if(this.chosingTitle === 7){
				this.getFirstReports()
			}
		},
		// 自定义时间范围查询
		customSearch(){
			if(this.chosedDate === '请选择日期范围'){
                this.$toastTop('请选择日期范围',3)
				return
			}else{
				this.dateType = ''
				this.pageNumber1 = 1
				this.statistic = []
				this.dateShowMode = '自定义'
				this.reloadData()
			}
		},
        teamCommissionSearch(){
            if(this.teamCommissionVal.trim().length === 0){
                this.$toastTop('请输入代理账号',3)
				return
			}else{
				this.pageNumber1 = 1
				this.statistic = []
				this.reloadData()
			}
        },
		loadMore(){
			this.pageNumber1++
			this.reloadData()
		},
	}
}
</script>

<style lang="scss" scoped>
.allReports {
	padding: .3rem 0;
	margin-bottom: 1rem;
	.allReports-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 .2rem;
		.allReports-title-search {
			position: relative;
			width: 75%;
			display: flex;
			align-items: center;
			background: rgb(238, 238, 238);
			height: .8rem;
			line-height: .8rem;
			border-radius: .5rem;
			.allReports-title-search-icon {
				height: .4rem;
				margin: 0 .1rem 0 .2rem;
			}
			.allReports-title-search-input {
				width: 65%;
				background: none;
				border: none;
				outline: none;
			}
			.allReports-title-search-btn {
				position: absolute;
				height: .6rem;
				line-height: .6rem;
				top: .1rem;
				right: .15rem;
				background: rgb(0, 71, 157);
				color: #FFFFFF;
				padding: 0 .2rem;
				border-radius: .5rem;
			}
		}
		.search-btn {
			width: 1.5rem;
			height: .6rem;
			line-height: .6rem;
		}
	}
	.allReports-content {
		padding: 0 .2rem;
		margin-top: .2rem;
		.allReports-content-title-box {
			overflow: hidden;
			// overflow-x: scroll;
			.allReports-content-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 15rem;
				transition: all .3s;
				.allReports-content-title-list {
					color: rgb(114, 114, 114);
					height: .6rem;
					padding: 0 .15rem;
				}
				.title-chosing {
					font-weight: bold;
					color: rgb(0, 71, 157);
					border-bottom: rgb(0, 71, 157) 5px solid;
				}
			}
		}
	}
	.gray-line {
		height: 1px;
		background: rgb(160, 160, 160);
	}
	.collapse-content {
		margin-top: .2rem;
		.no-data-box {
			text-align: center;
			margin-top: 1rem;
			.no-data-img {
				width: 3rem;
			}
			.no-data-fonts{
				color: rgb(176,182,190);
				font-size: .4rem;
				margin-top: .2rem;
			}
		}
		.load-more {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #9C9C9C;
			margin-top: .15rem;
			margin-bottom: 1rem;
			.load-more-icon {
				height: .15rem;
				margin-left: .15rem;
			}
		}
		.collapse-content-list {
			margin-top: .1rem;
			.collapse-content-list-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgb(229, 229, 229);
				height: .8rem;
				padding: 0 .2rem;
				color: rgb(65, 65, 65);
				.collapse-content-list-title-right {
					height: .25rem;
				}
				.collapse-content-list-title-right2 {
					transform: rotate(180deg);
				}
				div {
					display: flex;
					align-items: center;
					.right-fonts {
						margin-right: .15rem;
					}
					.collapse-content-list-title-right {
						height: .25rem;
					}
					.collapse-content-list-title-right2 {
						transform: rotate(180deg);
					}
				}
				
			}
			.collapse-content-list-table {
				padding: .1rem .2rem .2rem;
				.collapse-content-list-table-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					border-bottom: rgb(229, 229, 229) 1px solid;
					padding: .15rem 0;
					div {
						width: 33.3%;
						.line1 {
							width: 100%;
							color: rgb(102, 102, 102);
						}
						.line2 {
							margin-top: .1rem;
							width: 100%;
							color: rgb(52, 52, 52);
						}
					}
					.gray-line {
						height: .5rem;
						width: 1px;
						background: rgb(229, 229, 229);
					}
				}
				.collapse-content-list-table-list2 {
					div {
						width: 50%;
					}
				}
				.collapse-content-list-table-list3 {
					div {
						width: 100%;
					}
				}
			}
		}
	}
	.date-switch {
		height: 6rem;
		padding: 0 .25rem;
		color: rgb(46,46,46);
		font-size: .28rem;
		.date-switch-title {
			height: 1rem;
			line-height: 1rem;
			text-align: center;
			font-weight: bold;
			border-bottom: rgb(210,210,210) 1px solid;
		}
		.date-switch-content {
			padding: 0 .3rem;
			.date-switch-content-list {
				height: .8rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.right {
					width: 16px;
					height: 16px;
					border-radius: 50%;
					border: rgb(83,83,83) 1px solid;
					display: flex;
					justify-content: center;
					align-items: center;
					.blue-point {
						height: 12px;
						width:  12px;
						border-radius: 50%;
						background: rgb(0, 71, 157);
					}
				}
			}
		}
		.date-switch-sub {
			width: 80%;
			margin: .6rem auto 0;
		}
	}
}
</style>
